<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1220578" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">编辑分类</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">编辑参数组</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">采购单</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">编辑导航</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">安全库存需求</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">部门信息</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">编辑楼层</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">编辑参数</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">编辑订单</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">操作详情</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">订单总数</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">采购信息</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">订单需求</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">订单管理</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">角色基本信息</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">待处理事务</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">废弃</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">发票申请</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">今日销售额</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">快捷入口</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">今日订单数</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">回款信息</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">结算单</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">近7天销售额</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">角色分组信息</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">金牌</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">添加商品</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">项目招标信息</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">铜牌</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">商品信息</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">商城项目</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">数据列表</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">项目联系人信息</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">关联订单信息</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">销售下单</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">开票信息</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">系统管理员</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">释放</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">自定义需求</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">推送消息</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">组织机构基本信息</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">组织机构收票地址</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">专柜项目</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">项目投标信息</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">我的开票申请</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">银牌</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">组织机构经营区域</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">TOP榜</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">pdf</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">减少-01</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">上架-01</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">下架-01</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">增加</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">确认</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">读取数据</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">隐藏</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">显示</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">扩展</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">收缩</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">迁移</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconbianjifenlei"></span>
            <div class="name">
              编辑分类
            </div>
            <div class="code-name">.iconbianjifenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbianjicanshuzu"></span>
            <div class="name">
              编辑参数组
            </div>
            <div class="code-name">.iconbianjicanshuzu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaigoudan"></span>
            <div class="name">
              采购单
            </div>
            <div class="code-name">.iconcaigoudan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbianjidaohang"></span>
            <div class="name">
              编辑导航
            </div>
            <div class="code-name">.iconbianjidaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconanquankucunxuqiu"></span>
            <div class="name">
              安全库存需求
            </div>
            <div class="code-name">.iconanquankucunxuqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbumenxinxi"></span>
            <div class="name">
              部门信息
            </div>
            <div class="code-name">.iconbumenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbianjilouceng"></span>
            <div class="name">
              编辑楼层
            </div>
            <div class="code-name">.iconbianjilouceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbianjicanshu"></span>
            <div class="name">
              编辑参数
            </div>
            <div class="code-name">.iconbianjicanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconbianjidingdan"></span>
            <div class="name">
              编辑订单
            </div>
            <div class="code-name">.iconbianjidingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondaoru"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icondaoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaozuoxiangqing"></span>
            <div class="name">
              操作详情
            </div>
            <div class="code-name">.iconcaozuoxiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondaochu"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icondaochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingdanzongshu"></span>
            <div class="name">
              订单总数
            </div>
            <div class="code-name">.icondingdanzongshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaigouxinxi"></span>
            <div class="name">
              采购信息
            </div>
            <div class="code-name">.iconcaigouxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.iconguanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingdanxuqiu"></span>
            <div class="name">
              订单需求
            </div>
            <div class="code-name">.icondingdanxuqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondingdanguanli"></span>
            <div class="name">
              订单管理
            </div>
            <div class="code-name">.icondingdanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaosejibenxinxi"></span>
            <div class="name">
              角色基本信息
            </div>
            <div class="code-name">.iconjiaosejibenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondaichulishiwu"></span>
            <div class="name">
              待处理事务
            </div>
            <div class="code-name">.icondaichulishiwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfeiqi"></span>
            <div class="name">
              废弃
            </div>
            <div class="code-name">.iconfeiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconfapiaoshenqing"></span>
            <div class="name">
              发票申请
            </div>
            <div class="code-name">.iconfapiaoshenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjinrixiaoshoue"></span>
            <div class="name">
              今日销售额
            </div>
            <div class="code-name">.iconjinrixiaoshoue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkuaijierukou"></span>
            <div class="name">
              快捷入口
            </div>
            <div class="code-name">.iconkuaijierukou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjinridingdanshu"></span>
            <div class="name">
              今日订单数
            </div>
            <div class="code-name">.iconjinridingdanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconhuikuanxinxi"></span>
            <div class="name">
              回款信息
            </div>
            <div class="code-name">.iconhuikuanxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icontongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.iconshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiesuandan"></span>
            <div class="name">
              结算单
            </div>
            <div class="code-name">.iconjiesuandan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjintianxiaoshoue"></span>
            <div class="name">
              近7天销售额
            </div>
            <div class="code-name">.iconjintianxiaoshoue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjiaosefenzuxinxi"></span>
            <div class="name">
              角色分组信息
            </div>
            <div class="code-name">.iconjiaosefenzuxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjinpai"></span>
            <div class="name">
              金牌
            </div>
            <div class="code-name">.iconjinpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconcaidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.iconcaidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontianjiashangpin"></span>
            <div class="name">
              添加商品
            </div>
            <div class="code-name">.icontianjiashangpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangmuzhaobiaoxinxi"></span>
            <div class="name">
              项目招标信息
            </div>
            <div class="code-name">.iconxiangmuzhaobiaoxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontongpai"></span>
            <div class="name">
              铜牌
            </div>
            <div class="code-name">.icontongpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.iconsousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshangpinxinxi"></span>
            <div class="name">
              商品信息
            </div>
            <div class="code-name">.iconshangpinxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshangchengxiangmu"></span>
            <div class="name">
              商城项目
            </div>
            <div class="code-name">.iconshangchengxiangmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshujuliebiao"></span>
            <div class="name">
              数据列表
            </div>
            <div class="code-name">.iconshujuliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangmulianxirenxinxi"></span>
            <div class="name">
              项目联系人信息
            </div>
            <div class="code-name">.iconxiangmulianxirenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconguanliandingdanxinxi"></span>
            <div class="name">
              关联订单信息
            </div>
            <div class="code-name">.iconguanliandingdanxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiaoshouxiadan"></span>
            <div class="name">
              销售下单
            </div>
            <div class="code-name">.iconxiaoshouxiadan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkaipiaoxinxi"></span>
            <div class="name">
              开票信息
            </div>
            <div class="code-name">.iconkaipiaoxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxitongguanliyuan"></span>
            <div class="name">
              系统管理员
            </div>
            <div class="code-name">.iconxitongguanliyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshifang"></span>
            <div class="name">
              释放
            </div>
            <div class="code-name">.iconshifang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzidingyixuqiu"></span>
            <div class="name">
              自定义需求
            </div>
            <div class="code-name">.iconzidingyixuqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icontuisongxiaoxi"></span>
            <div class="name">
              推送消息
            </div>
            <div class="code-name">.icontuisongxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhijigoujibenxinxi"></span>
            <div class="name">
              组织机构基本信息
            </div>
            <div class="code-name">.iconzuzhijigoujibenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhijigoushoupiaodizhi"></span>
            <div class="name">
              组织机构收票地址
            </div>
            <div class="code-name">.iconzuzhijigoushoupiaodizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzhuanguixiangmu"></span>
            <div class="name">
              专柜项目
            </div>
            <div class="code-name">.iconzhuanguixiangmu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiangmutoubiaoxinxi"></span>
            <div class="name">
              项目投标信息
            </div>
            <div class="code-name">.iconxiangmutoubiaoxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconwodekaipiaoshenqing"></span>
            <div class="name">
              我的开票申请
            </div>
            <div class="code-name">.iconwodekaipiaoshenqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyinpai"></span>
            <div class="name">
              银牌
            </div>
            <div class="code-name">.iconyinpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzuzhijigoujingyingquyu"></span>
            <div class="name">
              组织机构经营区域
            </div>
            <div class="code-name">.iconzuzhijigoujingyingquyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconTOPbang"></span>
            <div class="name">
              TOP榜
            </div>
            <div class="code-name">.iconTOPbang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconpdf"></span>
            <div class="name">
              pdf
            </div>
            <div class="code-name">.iconpdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.iconshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconjianshao-"></span>
            <div class="name">
              减少-01
            </div>
            <div class="code-name">.iconjianshao-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshangjia-"></span>
            <div class="name">
              上架-01
            </div>
            <div class="code-name">.iconshangjia-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxiajia-"></span>
            <div class="name">
              下架-01
            </div>
            <div class="code-name">.iconxiajia-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconzengjia"></span>
            <div class="name">
              增加
            </div>
            <div class="code-name">.iconzengjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqueren"></span>
            <div class="name">
              确认
            </div>
            <div class="code-name">.iconqueren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconduqushuju"></span>
            <div class="name">
              读取数据
            </div>
            <div class="code-name">.iconduqushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icondayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.icondayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconyincang"></span>
            <div class="name">
              隐藏
            </div>
            <div class="code-name">.iconyincang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconxianshi"></span>
            <div class="name">
              显示
            </div>
            <div class="code-name">.iconxianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconkuozhan"></span>
            <div class="name">
              扩展
            </div>
            <div class="code-name">.iconkuozhan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconshousuo"></span>
            <div class="name">
              收缩
            </div>
            <div class="code-name">.iconshousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconqianyi"></span>
            <div class="name">
              迁移
            </div>
            <div class="code-name">.iconqianyi
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianjifenlei"></use>
                </svg>
                <div class="name">编辑分类</div>
                <div class="code-name">#iconbianjifenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianjicanshuzu"></use>
                </svg>
                <div class="name">编辑参数组</div>
                <div class="code-name">#iconbianjicanshuzu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaigoudan"></use>
                </svg>
                <div class="name">采购单</div>
                <div class="code-name">#iconcaigoudan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianjidaohang"></use>
                </svg>
                <div class="name">编辑导航</div>
                <div class="code-name">#iconbianjidaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconanquankucunxuqiu"></use>
                </svg>
                <div class="name">安全库存需求</div>
                <div class="code-name">#iconanquankucunxuqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbumenxinxi"></use>
                </svg>
                <div class="name">部门信息</div>
                <div class="code-name">#iconbumenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianjilouceng"></use>
                </svg>
                <div class="name">编辑楼层</div>
                <div class="code-name">#iconbianjilouceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianjicanshu"></use>
                </svg>
                <div class="name">编辑参数</div>
                <div class="code-name">#iconbianjicanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconbianjidingdan"></use>
                </svg>
                <div class="name">编辑订单</div>
                <div class="code-name">#iconbianjidingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaoru"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icondaoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaozuoxiangqing"></use>
                </svg>
                <div class="name">操作详情</div>
                <div class="code-name">#iconcaozuoxiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaochu"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icondaochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingdanzongshu"></use>
                </svg>
                <div class="name">订单总数</div>
                <div class="code-name">#icondingdanzongshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaigouxinxi"></use>
                </svg>
                <div class="name">采购信息</div>
                <div class="code-name">#iconcaigouxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#iconguanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingdanxuqiu"></use>
                </svg>
                <div class="name">订单需求</div>
                <div class="code-name">#icondingdanxuqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondingdanguanli"></use>
                </svg>
                <div class="name">订单管理</div>
                <div class="code-name">#icondingdanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaosejibenxinxi"></use>
                </svg>
                <div class="name">角色基本信息</div>
                <div class="code-name">#iconjiaosejibenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondaichulishiwu"></use>
                </svg>
                <div class="name">待处理事务</div>
                <div class="code-name">#icondaichulishiwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfeiqi"></use>
                </svg>
                <div class="name">废弃</div>
                <div class="code-name">#iconfeiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconfapiaoshenqing"></use>
                </svg>
                <div class="name">发票申请</div>
                <div class="code-name">#iconfapiaoshenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjinrixiaoshoue"></use>
                </svg>
                <div class="name">今日销售额</div>
                <div class="code-name">#iconjinrixiaoshoue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkuaijierukou"></use>
                </svg>
                <div class="name">快捷入口</div>
                <div class="code-name">#iconkuaijierukou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjinridingdanshu"></use>
                </svg>
                <div class="name">今日订单数</div>
                <div class="code-name">#iconjinridingdanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconhuikuanxinxi"></use>
                </svg>
                <div class="name">回款信息</div>
                <div class="code-name">#iconhuikuanxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icontongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#iconshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiesuandan"></use>
                </svg>
                <div class="name">结算单</div>
                <div class="code-name">#iconjiesuandan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjintianxiaoshoue"></use>
                </svg>
                <div class="name">近7天销售额</div>
                <div class="code-name">#iconjintianxiaoshoue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjiaosefenzuxinxi"></use>
                </svg>
                <div class="name">角色分组信息</div>
                <div class="code-name">#iconjiaosefenzuxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjinpai"></use>
                </svg>
                <div class="name">金牌</div>
                <div class="code-name">#iconjinpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconcaidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#iconcaidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontianjiashangpin"></use>
                </svg>
                <div class="name">添加商品</div>
                <div class="code-name">#icontianjiashangpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangmuzhaobiaoxinxi"></use>
                </svg>
                <div class="name">项目招标信息</div>
                <div class="code-name">#iconxiangmuzhaobiaoxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontongpai"></use>
                </svg>
                <div class="name">铜牌</div>
                <div class="code-name">#icontongpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#iconsousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshangpinxinxi"></use>
                </svg>
                <div class="name">商品信息</div>
                <div class="code-name">#iconshangpinxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshangchengxiangmu"></use>
                </svg>
                <div class="name">商城项目</div>
                <div class="code-name">#iconshangchengxiangmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshujuliebiao"></use>
                </svg>
                <div class="name">数据列表</div>
                <div class="code-name">#iconshujuliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangmulianxirenxinxi"></use>
                </svg>
                <div class="name">项目联系人信息</div>
                <div class="code-name">#iconxiangmulianxirenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconguanliandingdanxinxi"></use>
                </svg>
                <div class="name">关联订单信息</div>
                <div class="code-name">#iconguanliandingdanxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiaoshouxiadan"></use>
                </svg>
                <div class="name">销售下单</div>
                <div class="code-name">#iconxiaoshouxiadan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkaipiaoxinxi"></use>
                </svg>
                <div class="name">开票信息</div>
                <div class="code-name">#iconkaipiaoxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxitongguanliyuan"></use>
                </svg>
                <div class="name">系统管理员</div>
                <div class="code-name">#iconxitongguanliyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshifang"></use>
                </svg>
                <div class="name">释放</div>
                <div class="code-name">#iconshifang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzidingyixuqiu"></use>
                </svg>
                <div class="name">自定义需求</div>
                <div class="code-name">#iconzidingyixuqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icontuisongxiaoxi"></use>
                </svg>
                <div class="name">推送消息</div>
                <div class="code-name">#icontuisongxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhijigoujibenxinxi"></use>
                </svg>
                <div class="name">组织机构基本信息</div>
                <div class="code-name">#iconzuzhijigoujibenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhijigoushoupiaodizhi"></use>
                </svg>
                <div class="name">组织机构收票地址</div>
                <div class="code-name">#iconzuzhijigoushoupiaodizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzhuanguixiangmu"></use>
                </svg>
                <div class="name">专柜项目</div>
                <div class="code-name">#iconzhuanguixiangmu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiangmutoubiaoxinxi"></use>
                </svg>
                <div class="name">项目投标信息</div>
                <div class="code-name">#iconxiangmutoubiaoxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwodekaipiaoshenqing"></use>
                </svg>
                <div class="name">我的开票申请</div>
                <div class="code-name">#iconwodekaipiaoshenqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyinpai"></use>
                </svg>
                <div class="name">银牌</div>
                <div class="code-name">#iconyinpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzuzhijigoujingyingquyu"></use>
                </svg>
                <div class="name">组织机构经营区域</div>
                <div class="code-name">#iconzuzhijigoujingyingquyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconTOPbang"></use>
                </svg>
                <div class="name">TOP榜</div>
                <div class="code-name">#iconTOPbang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconpdf"></use>
                </svg>
                <div class="name">pdf</div>
                <div class="code-name">#iconpdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#iconshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconjianshao-"></use>
                </svg>
                <div class="name">减少-01</div>
                <div class="code-name">#iconjianshao-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshangjia-"></use>
                </svg>
                <div class="name">上架-01</div>
                <div class="code-name">#iconshangjia-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxiajia-"></use>
                </svg>
                <div class="name">下架-01</div>
                <div class="code-name">#iconxiajia-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconzengjia"></use>
                </svg>
                <div class="name">增加</div>
                <div class="code-name">#iconzengjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqueren"></use>
                </svg>
                <div class="name">确认</div>
                <div class="code-name">#iconqueren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconduqushuju"></use>
                </svg>
                <div class="name">读取数据</div>
                <div class="code-name">#iconduqushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icondayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#icondayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconyincang"></use>
                </svg>
                <div class="name">隐藏</div>
                <div class="code-name">#iconyincang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconxianshi"></use>
                </svg>
                <div class="name">显示</div>
                <div class="code-name">#iconxianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconkuozhan"></use>
                </svg>
                <div class="name">扩展</div>
                <div class="code-name">#iconkuozhan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconshousuo"></use>
                </svg>
                <div class="name">收缩</div>
                <div class="code-name">#iconshousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconqianyi"></use>
                </svg>
                <div class="name">迁移</div>
                <div class="code-name">#iconqianyi</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
